Grafika dla Internetu

Istotnym elementem każdej witryny internetowej jest grafika, będąca dopełnieniem innych walorów strony. Celem grafiki jest generalnie upiększenie wyglądu strony. Należy jednak pamiętać, że aby użytkownicy odwiedzali często naszą stronę, grafika nań się znajdująca nie powinna drastycznie zwalniać ładowania strony przy naszych wąskich łączach. Ten artykuł omawia formaty grafiki występujące w internecie oraz podaje rady w jaki sposób zoptymalizować grafikę na potrzeby internetu i jaki format zapisu grafiki wybrać.

JPEG

Bardzo rozpowszechniony również poza siecią format zapisu grafiki rastrowej. Algorytm kompresji JPEG został stworzony do przechowywania zdigitalizowanych fotografii i obrazów z przeplatającymi się kolorami. Dla nich daje dobre efekty w zmniejszaniu wielkości obrazka. Pamiętajmy jednak, że kompresja JPEG jest stratna tzn. obraz traci na jakości. Utrata jakości zależy od stopnia kompresji zastosowanego przez twórcę strony. Teoretycznie zmiany jakości nie powinny być widoczne (w skali 1:1) przy kompresji nie przekraczającej 20-30%. Pamiętać również trzeba o tym, iż zapisane w formacie JPEG obrazy nie powinno się wielokrotnie edytować, ponieważ może to spowodować znaczne zniekształcenie fotografii i powiększenie jej wielkości. Omawiany format kompletnie nie nadaje się do zachowywania małych wielkościowo plików np. ikon. Do obrazków o dużej ilości jednego koloru lepiej się nadaje format GIF.

Kilka rad dotyczących tego formatu:

• używaj kompresji od 20% do 30%
• nie edytuj ponownie raz zapisanego obrazu u tym formacie
• możesz zmniejszyć rozmiar pliku przez ograniczenie palety kolorów do 32 000

GIF

Jeden ze starszych formatów grafiki. Jego obecna wersja powstała w 1989 roku. Plusem jest zgodność ze wszystkimi przeglądarkami i systemami operacyjnymi. Pozwala zapisywać obrazy z maksymalnie 256 kolorami. Obsługuje animację, przezroczystość oraz przeplot. Bezstratna kompresja formatu GIF jest idealna dla obrazków z dużą objętością jednego koloru.

Kilka rad dotyczących tego formatu:

• przy zapisie używaj jak najmniejszej liczby kolorów
• stosuj przezroczystość, to znacznie zmniejszy wielkość pliku
• gdy tworzycie animowany GIF przy niewielkiej ilości klatek na sekundę możecie zwiększyć płynność obrazu stosując efekt rozmazywania

PNG

Format powstały by zastąpić GIFa. Charakteryzuje się dobrą, bezstratną kompresją zdjęć i prostszych obrazów. Przekleństwem formatu jest to, że nie wszystkie przeglądarki potrafią wyświetlić obraz PNG. Choć MSIE 4.x potrafił już wyświetlić taki obraz, to dopiero wersja 5 przeglądarki jest w stanie w pełni go obsłużyć. Również Netscape 6 obsługuje ów format. To dobrze wróży PNG, choć żeby się przekonać czy zastąpi stare i wysłużone gify trzeba jeszcze trochę poczekać.

Kilka rad dotyczących tego formatu:

• na razie stosujcie go z rozwagą
• kiedy już zdecydujecie się na wykorzystanie tego formatu na swojej stronie, porównajcie jakość i wielkość pliku wynikowego *.png ze starszymi formatami GIF i JPEG

DjVu

Format powstały w 1999, a więc stosunkowo niedawno. Stanowi ogromną konkurencję dla gifa i jpega, gdyż jego kompresja nierzadko przewyższa wspomniane formaty a przy tym umożliwia zapis obrazu bez utraty jakości. Wykorzystuje kompresję wavelet - jedną z najbardziej zaawansowanych na świecie. Niestety jak to zwykle bywa, "jeśli coś jest dobre to wymaga pluginu", którego wielkość przekracza 2 MB.

Kilka rad dotyczących tego formatu:

• jeśli zamierzasz wykorzystać ów format na swoich stronach, uprzednio umieść odpowiedni plugin do ściągnięcia ze swojej strony lub link do witryny skąd taki plugin można ściągnąć

LWF

Daje leprze efekty od JPEG, jednak wymaga ściągnięcia odpowiedniego pluginu. Jest bardziej popularny od wcześniej wspomnianego DjVu, stąd ma większe szansę podbić sieć.

Kilka rad dotyczących tego formatu:

• jeśli zamierzasz wykorzystać ów format na swoich stronach, uprzednio umieść odpowiedni plugin do ściągnięcia ze swojej strony, lub link do witryny skąd taki plugin można ściągnąć
• ze względu na większą popularność od DjVu i podobne efekty kompresji, polecam ten format zapisu grafiki

SVG

Zupełnie nowy, choć długo oczekiwany format, różni się znacznie od pozostałych formatów graficznych występujących w internecie. Przede wszystkim nie posiada on algorytmów kompresujących, jest formatem wektorowym. Oparty jest na języku XML, stąd jego treść stanowią linijki kodu podobnie jak w HTMLu. Stanowi konkurencję przede wszystkim dla formatu GIF. Obrazek o rozdzielczości 200x200 o niewielkiej liczbie kolorów, przedstawiający domek, zapisany w GIFie waży 2184 bajtów, a w formacie SVG 557 bajtów.

Różnica, jak widać, jest znaczna. Do przeglądania plików *.svg potrzebny jest plugin (np. Adobe SVG Viewer http://www.adobe.com/svg/viewer/install). Dodatkowym plusem tego formatu zapisu grafiki jest to, że tekst zagnieżdżony w pliku *.svg daje się kopiować tak jak zwykły tekst w dokumencie HTML, może on też być katalogowany i wyszukiwany przez wyszukiwarki. Pliki *.svg można tworzyć za pomocą zwykłego edytora tekstu bądź przy pomocy najnowszych wersji pakietów Corel Draw i Adobe Ilustrator z odpowiednimi pluginami.

Kilka rad dotyczących tego formatu:

• jeśli zamierzacie wykorzystać ów format na swoich stronach, uprzednio umieść odpowiedni plugin do ściągnięcia ze swojej strony, lub link do witryny skąd taki plugin można ściągnąć
• proste grafiki możecie tworzyć przy pomocy edytora tekstu, jednak do bardziej skomplikowanych grafik radzę wykorzystać program do tworzenia grafiki wektorowej (np. Adobe Ilustrator 9.0) lub skorzystać z darmowego programu firmy Jasc Trajectory Pro 0.30 (www.jasc.com).

Flash

Rewelacja firmy Macromedia. Wektorowe pliki graficzne *.swf zapewniają wysoką jakość obrazów, możliwość wprowadzenia interaktywności. Doskonale nadaje się do animacji na stronach WWW. Kilkuminutowy, interaktywny, udźwiękowiony, film *.swf zajmuje zaledwie kilkaset kilobajtów, a animowany napis bajtow. Dodatkowym plusem jest duża popularność tego formatu w sieci. Większość użytkowników internetu na świecie posiada pluginy niezbędne do wyświetlania tego typu obrazków.

Kilka rad dotyczących tego formatu:

• zamiast umieszczać na swojej witrynie mnóstwo efektownych, choć zwalniających ładowanie strony gifów, można wykorzystać format Flash

Łukasz Witczak